<template>
  <div class="page">
    <div class="form-wrapper">
      <el-form
        ref="form"
        label-width="120px"
        label-position="right"
        :rules="rules"
        :model="form"
      >
        <el-form-item label="真实姓名：" prop="realName">
          <el-input
            type="text"
            v-model="form.realName"
            placeholder="请输入真实姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码：" prop="idCard">
          <el-input
            type="text"
            v-model="form.idCard"
            placeholder="请输入身份证号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="身份证人像面："
          prop="idCardFront"
          style="margin-bottom: 20px"
        >
          <ImageUpload
            :imgSrc="require('@/assets/img/icon-upload2.png')"
            :width="200"
            :height="130"
            :limit="1"
            v-model="form.idCardFront"
          ></ImageUpload>
        </el-form-item>
        <el-form-item
          label="身份证国徽面："
          prop="idCardBack"
          style="margin-bottom: 20px"
        >
          <ImageUpload
            :imgSrc="require('@/assets/img/icon-upload2.png')"
            :width="200"
            :height="130"
            :limit="1"
            v-model="form.idCardBack"
          ></ImageUpload>
        </el-form-item>
      </el-form>

      <el-button type="primary" class="submit-btn" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { applyRealName } from "@/api/user";
export default {
  name: "shopInfo",
  data() {
    return {
      form: {
        realName: "",
        idCard: "",
        idCardFront: "",
        idCardBack: "",
      },
      rules: {
        realName: [{ required: true, message: "真实姓名不能为空", trigger: "blur" }],
        idCard: [
          { required: true, message: "身份证号码不能为空", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "身份证号格式不正确",
            trigger: blur,
          },
        ],
        idCardFront: [
          { required: true, message: "身份证人像面不能为空", trigger: "blur" },
        ],
        idCardBack: [
          { required: true, message: "身份证国徽面不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          applyRealName(this.form).then((res) => {
            this.$modal.msgSuccess(res.message);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
}

.form-wrapper {
  padding: 50px 0;

  ::v-deep .el-form-item__label {
    line-height: 50px;
    font-size: 16px;
    width: 120px;
  }

  // 设置文本框长度
  ::v-deep .el-input__inner {
    width: 548px;
    height: 50px;
    font-size: 16px;
  }
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  font-size: 20px;
  margin-top: 100px;
}
</style>
